/<template>
  <div class="body">
    <!-- <button @click="num++">{{ list }}</button> -->
    <!-- 身体分成左右 -->
    <!-- 左一级列表 -->
    <!-- :属性名 = ‘数据’ 属性名就是子接受的名字 -->
    <Left :list="list" :activeIndex="activeIndex"></Left>
    <!--  v-if="list[0]" list默认是空数据，axios请求需要时间，默认list[0] 不存在。list[0].children 就会报错，先把前两层判断一下 -->
    <Right v-if="list[activeIndex]" :child="list[activeIndex].children"></Right>
    <!-- 右二级列表 -->
  </div>
</template>
<script>
import Left from './body/left.vue'
import Right from './body/right.vue'
// 左右都需要用 父亲的数据，只在父亲身上请求一次就好了
import axios from "axios";

export default {
  data() {
    return {
      num: 1,
      list: [],
      activeIndex: 0,
    };
  },
  components: {
    Left,
    Right,
  },
  // 生命周期钩子函数
  // 前四个 创建 挂载 在一次生命中，只会执行一次
  // 创建 -> 出生
  beforeCreate() {
    console.log("要被创建了", this.num, this.$el); // undefined undefined
  },
  created() {
    console.log("我已经出生了", this.num, this.$el); // 1 undefined
  },
  // 挂载 -> 上户口
  beforeMount() {
    console.log(`我爹要给我上户口了`, this.num, this.$el); // 1 undefined
  },
  // 请求接口，获取数据, **常用**
  mounted() {
    console.log(`已经上户口了`, this.num, this.$el); // 1 外层body标签
    axios.get("/list").then((res) => {
      console.log(res);
      this.list = res.data;
    });
    // 给父亲身上安装一个电话 $on
    // 参数一：定义电话号码
    // 参数二：儿子返回给的数据，需要父亲赋值一遍
    this.bus.$on("changeParent", (index) => {
      console.log("这是子传给我的下标", index);
      this.activeIndex = index;
    });
  },
  // 当数据修改的时候，页面回被更新
  // 更新 -> 上学
  beforeUpdate() {
    console.log(`上学前`, this.num, this.$el); // 1 外层body标签
  },
  updated() {
    console.log(`上学后`, this.num, this.$el); // 1 外层body标签
  },
  // keep-alive激活 -> 施加魔法
  // 在父身上使用的时候，被keep-alive包起来
  activated() {
    console.log("keep-alive 展示", this.num, this.$el); // 1 外层body标签
  },
  // keep-alive失活 -> 取消魔法
  deactivated() {
    console.log("keep-alive 隐藏", this.num, this.$el); // 1 外层body标签
  },
  // 销毁 -> 死亡
  // 只会执行一次  **常用**
  beforeDestroy() {
    console.log("死之前", this.num, this.$el); // 1 外层body标签
  },
  destroyed() {
    console.log("死之后", this.num, this.$el); // 1 外层body标签
  },
};
</script>

<style>
.body {
  display: flex;
  overflow: hidden;
}
.left {
  width: 80px;
  height: 100%;
  background: #cfc;
  overflow-y: scroll;
}

.right {
  flex: 1;
  background: #ccf;
  overflow-y: scroll;
}
</style>